<template>
  <div class="inline-table-container">
    <div class="search-form-container">
      <el-form ref="ruleFormRef" :inline="true" :model="formInline">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formInline.name" class="common-input max-input" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="common-button" @click="onSearch">搜索</el-button>
          <el-button class="common-button" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-table
        class="table-model"
        height="470"
        v-loading="tbLoading"
        :data="pageData"
        :border="true"
        :header-cell-style="{background: variables.tableHeaderBackGroundColor, color: variables.tableHeaderColor}"
      >
        <el-table-column label="姓名" prop="name" align="center" width="220">
          <template #default="scope">
            <template v-if="scope.row.edit">
              <div class="edit-item">
                <el-input v-model="scope.row.name" class="inline-input"></el-input>
                <el-button @click="onCancel(scope.row)" type="warning" class="inline-button">
                  <i class="iconfont icon-refresh cancel-icon"></i>取消
                </el-button>
              </div>
            </template>
            <template v-else>
              {{ scope.row.name }}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="gender" align="center">
          <template #default="scope">
            {{ scope.row.gender == 0 ? '女' : '男'}}
          </template>
        </el-table-column>
        <el-table-column label="年龄" prop="age" align="center"></el-table-column>
        <el-table-column label="账号" prop="account" align="center"></el-table-column>
        <el-table-column label="城市" prop="city" align="center"></el-table-column>
        <el-table-column label="城区" prop="region" align="center"></el-table-column>
        <el-table-column label="地址" prop="address" align="center" width="200"></el-table-column>
        <el-table-column label="日期" prop="date" align="center"></el-table-column>
        <el-table-column label="邮编" prop="postalCode" align="center"></el-table-column>
        <el-table-column label="操作" prop="operation" align="center" width="200">
          <template #default="scope">
            <el-button
              v-if="scope.row.edit"
              type="success"
              @click="onSave(scope.row)"
              class="inline-button"
            >
              <i class="iconfont icon-save small-icon"></i>保存
            </el-button>
            <el-button
              v-else
              type="primary"
              @click="onEdit(scope.row)"
              class="inline-button"
            >
              <i class="iconfont icon-edit small-icon"></i>编辑
            </el-button>
            <el-button
              type="danger"
              @click="onDelete(scope.row)"
              class="inline-button"
            >
              <i class="iconfont icon-delete small-icon"></i>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- ------------分页--------------->
      <div class="pagination">
        <el-pagination
          :currentPage="pageParams.currentPage"
          :page-size="pageParams.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParams.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { publicController} from '@/utils/publicPackage.js'
import variables from '@/styles/variables.scss'
export default {
  name: 'index',
  mixins:[ publicController ],
  data(){
    return {
      formInline: {
        name: ''
      },
      tableData: [],
      pageData: [],
      tbLoading: false,
      pageParams: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
    }
  },
  watch:{
    tableData:{
      deep: true,
      immediate: true,
      handler(val){
        this.tablePages(val)
      }
    }
  },
  computed:{
    variables(){
      return variables
    },
  },
  mounted () {
    this.getTableData()
  },
  methods:{
    // 获取表格分页数据
    tablePages(val){
      // 深拷贝
      var data = JSON.parse(JSON.stringify(val))
      this.$set(this.pageParams,'total',data.length)
      this.pageData = data.splice((this.pageParams.currentPage - 1) * this.pageParams.pageSize, this.pageParams.pageSize)
    },
    // 搜索表格数据
    onSearch(){
      this.tbLoading = true
      this.$set(this.pageParams,'currentPage',1)
      const condition = this.formInline.name
      this.pageData = this.tableData.filter(item => item.name.indexOf(condition) > -1)
      this.$set(this.pageParams,'total',this.pageData.length)
      this.tableData = this.pageData
      setTimeout(() => {
        this.tbLoading = false
      }, 1000)
    },
    // 重置表单查询，表格数据
    onReset(){
      this.tbLoading = true
      this.tableData = []
      this.$set(this.pageParams,'currentPage',1)
      this.$refs['ruleFormRef'].resetFields()
      setTimeout(() => {
        this.getTableData()
        this.tbLoading = false
      }, 1000)
    },
    // 取消修改
    onCancel(row){
      row.edit = false
    },
    // 编辑
    onEdit(row) {
      row.edit = true
    },
    // 保存
    onSave(row){
      row.edit = false
    },
    // 删除
    onDelete(row){
      this.$confirm("你确定要删除当前项吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData = this.tableData.filter(item => item.id != row.id)
          this.$message.success('删除成功')
        })
        .catch(() => {});
    },
    // 当前分页大小发生改变
    handleSizeChange(val){
      this.$set(this.pageParams,'pageSize',val)
      this.tablePages(this.tableData)
    },
    // 当前页数发生改变
    handleCurrentChange(val){
      this.$set(this.pageParams,'currentPage',val)
      this.tablePages(this.tableData)
    }
  }
}
</script>

<style lang="scss" scoped>
.search-form-container{
  text-align: left;
  background: white;
  border-radius: 4px;
  padding: 20px 20px 0;
  box-shadow: 0 0 12px rgba(0, 0,0 , 0.05);
}
.table-container{
  margin-top: 10px;
  background: white;
  border-radius: 4px;
  padding: 20px ;
  box-shadow: 0 0 12px rgba(0, 0,0 , 0.05);
  height: calc(100vh - 270px);
}
.edit-item{
  display: flex;
}
</style>

<style lang="scss">
.max-input{
  .el-input__inner{
    width: 300px;
  }
}
.inline-input{
  .el-input__inner{
    line-height: 26px;
    height: 26px;
    width: 120px;
  }
}
</style>

